@page "/scheduler/header-bar"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Buttons
@using System.Globalization
@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This demo shows the way of adding custom toolbar as Scheduler header bar. Here, an employee image is added to the
        header bar, clicking on which will open the popup showing that person's short profile information.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        In this demo, a custom toolbar is rendered with schedule header bar items and a popup has been designed separately with a person's profile info and kept in a hidden state initially.
    </p>
    <p>
        In this case, the header bar of Scheduler needs to be hidden by setting false to the 
        <code>ShowHeaderBar</code> property.
    </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        @if (ShowHeader)
        {
            <SfToolbar>
                <ToolbarItems>
                    <ToolbarItem Align="ItemAlign.Left" PrefixIcon="sf-icon-arrowhead-left" TooltipText="Previous" Id="Previous" OnClick="@Clicked"></ToolbarItem>
                    <ToolbarItem Align="ItemAlign.Left" PrefixIcon="sf-icon-arrowhead-right" TooltipText="Next" Id="Next" OnClick="@Clicked"></ToolbarItem>
                    <ToolbarItem Align="ItemAlign.Left" SuffixIcon="sf-icon-arrowhead-down" Text="@CurrentDate.ToString("MMMM yyyy", CultureInfo.InvariantCulture)" OnClick="@DateRangeClick"></ToolbarItem>
                    <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
                    <ToolbarItem Align="ItemAlign.Right" Type="ItemType.Button" Id="Today" Text="Today" OnClick="@Clicked"></ToolbarItem>
                    <ToolbarItem Type="ItemType.Button" Align="ItemAlign.Right" OnClick="@ImageClick">
                        <Template>
                            <div class="image"><img src="https://ej2.syncfusion.com/demos/src/schedule/images/nancy.png" /></div>
                        </Template>
                    </ToolbarItem>
                </ToolbarItems>
            </SfToolbar>
        }
        <SfSchedule TValue="ScheduleData.AppointmentData" Height="650px" ShowHeaderBar="false" @bind-SelectedDate="@CurrentDate">
            <ChildContent>
                @if (ShowHeader)
                {
                    <div class="e-header-popup">
                        @if (ShowCalendar)
                        {
                            <SfCalendar TValue="DateTime" @bind-Value="@CurrentDate" Start="CalendarView.Year" Depth="CalendarView.Year"></SfCalendar>
                        }
                    </div>
                    <div class="profile-wrapper" style="display: @ImageContent">
                        <div class="profile-container">
                            <span class="profile-image"></span>
                            <div class="content-wrap">
                                <div class="name">Nancy</div>
                                <div class="destination">Product Manager</div>
                                <div class="status"><span class="status-icon"></span>Online</div>
                            </div>
                        </div>
                    </div>
                }
                <ScheduleViews>
                    <ScheduleView Option="View.Month"></ScheduleView>
                </ScheduleViews>
                <ScheduleEvents TValue="ScheduleData.AppointmentData" EventRendered="@EventRendered"></ScheduleEvents>
                <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
            </ChildContent>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <div class="property-panel-content">
        <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
            <tbody>
                <tr style="height: 50%">
                    <td style="width: 100%">
                        <SfCheckBox TChecked="bool" @bind-Checked="@Checked" @onchange="@ShowToolbar" Label="Show/Hide Header bar"></SfCheckBox>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@code{
    public DateTime CurrentDate { get; set; } = new DateTime(2020, 1, 16);
    public bool ShowHeader { get; set; } = true;
    public string ImageContent { get; set; } = "none";
    public bool Checked { get; set; } = true;
    public bool ShowCalendar { get; set; } = false;
    List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetEmployeeEventData();
    public void ShowToolbar()
    {
        ImageContent = "none";
        ShowHeader = Checked;
        ShowCalendar = false;
    }
    public void Clicked(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (args.Item.Id == "Previous")
        {
            CurrentDate = CurrentDate.AddMonths(-1);
        }
        if (args.Item.Id == "Next")
        {
            CurrentDate = CurrentDate.AddMonths(1);
        }
        if (args.Item.Id == "Today")
        {
            CurrentDate = DateTime.Now.Date;
        }
    }
    public void EventRendered(EventRenderedArgs<ScheduleData.AppointmentData> args)
    {
        if (args.Data.CategoryColor != null)
        {
            args.Attributes = new Dictionary<string, object>() {
                { "style", $"background-color:{args.Data.CategoryColor}" }
            };
        }
    }
    public void DateRangeClick()
    {
        ShowCalendar = !ShowCalendar;
    }
    public void ImageClick()
    {
        ImageContent = (ImageContent == "none") ? "block" : "none";
        ShowCalendar = false;
    }
}
<style>
    @@font-face {
        font-family: 'iconStyle';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    [class^="sf-icon-"], [class*=" sf-icon-"] {
        font-family: 'iconStyle' !important;
        speak: none;
        font-size: 55px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .sf-icon-arrowhead-right:before {
        content: "\e700";
    }

    .sf-icon-arrowhead-left:before {
        content: "\e702";
    }

    .sf-icon-arrowhead-down:before {
        content: "\e707";
    }

    .bootstrap .sf-icon-arrowhead-right:before,
    .material .sf-icon-arrowhead-right:before {
        content: "\e705";
    }

    .bootstrap .sf-icon-arrowhead-left:before,
    .material .sf-icon-arrowhead-left:before {
        content: "\e704";
    }

    .highcontrast .sf-icon-arrowhead-right:before,
    .fabric .sf-icon-arrowhead-right:before {
        content: "\e703";
    }

    .highcontrast .sf-icon-arrowhead-left:before,
    .fabric .sf-icon-arrowhead-left:before {
        content: "\e701";
    }

    .highcontrast .sf-icon-arrowhead-down:before,
    .fabric .sf-icon-arrowhead-down:before {
        content: "\e706";
    }

    .bootstrap4 .sf-icon-arrowhead-right:before {
        content: "\e700";
    }

    .bootstrap4 .sf-icon-arrowhead-left:before {
        content: "\e702";
    }

    .material .sf-icon-arrowhead-down:before,
    .bootstrap .sf-icon-arrowhead-down:before,
    .bootstrap4 .sf-icon-arrowhead-down:before {
        content: "\e707";
    }

    .e-header-popup .e-calendar {
        position: absolute;
        z-index: 100;
        top: -1px;
        left: 97px;
    }

    .image img {
        width: 25px;
    }

    .profile-wrapper {
        width: 185px;
        height: 80px;
        background-color: #fafafa;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        position: absolute;
        z-index: 100;
        top: 0px;
        right: 0px;
    }

    .profile-wrapper .profile-container {
        display: flex;
        padding: 10px;
    }

    .profile-wrapper .profile-image {
        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/nancy.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
        width: 60px;
        height: 60px;
    }

    .profile-wrapper .content-wrap {
        padding-left: 10px;
    }

    .profile-wrapper .name {
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        margin-top: 2px;
    }

    .profile-wrapper .destination {
        font-size: 12px;
    }

    .profile-wrapper .status-icon {
        height: 6px;
        width: 6px;
        background: green;
        border-radius: 100%;
        float: left;
        margin-right: 4px;
        margin-top: 4px;
    }

    .profile-wrapper .status {
        font-size: 11px;
    }

    .highcontrast .profile-wrapper {
        border: 1px solid #969696
    }

    .highcontrast .profile-wrapper .profile-container {
        background-color: #000;
    }

    .e-schedule.e-device .e-header-popup .e-calendar {
        left: 0px;
    }
</style>